import {motion} from "framer-motion"
import {Autoplay, EffectCards, EffectCoverflow, FreeMode, Keyboard, Mousewheel, Pagination} from "swiper/modules";
import {Swiper, SwiperSlide} from "swiper/react";
import styles from "./index.module.less"

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/virtual';
import 'swiper/css/effect-coverflow';
import 'swiper/css/effect-cards';

const SwiperDemo = () => {
    return (
        <div className={styles.swiperDemo}>

            <motion.div transition={{duration:1.2,type:"spring"}} initial={{transform:"translateY(200px)",opacity:0}} animate={{transform:"translateY(0px)",opacity:1}} className={styles["demoItem"]}>
                <div className={styles["title"]}>
                    coverflow
                </div>
                <Swiper
                    className={styles["swiperWrap"]}
                    modules={[Pagination, Keyboard, Autoplay, FreeMode, EffectCoverflow, Mousewheel]}
                    loop={true}
                    keyboard={{
                        enabled: true,
                    }}
                    pagination={{
                        clickable: true,
                        dynamicBullets: true,
                    }}
                    autoplay={true}
                    effect={"coverflow"}
                    coverflowEffect={{
                        rotate: 0,
                        depth: 200,
                    }}
                    slideClass={styles["swiperItem"]}
                    mousewheel={true} // 支持鼠标滚动
                    spaceBetween={0} // 间距
                    slidesPerView={2.5} // 显示数量
                    centeredSlides={true} // 幻灯片居中
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                >
                    {Array.from(Array(10).keys()).map((_item, i) => (
                        <SwiperSlide key={i} className={styles["swiperItem"]}>Slide {i}</SwiperSlide>
                    ))}

                </Swiper>
            </motion.div>

            <div className={styles["demoItem"]}>
                <div className={styles["title"]}>
                    cards
                </div>
                <Swiper
                    className={styles["swiperWrap"]}
                    modules={[Pagination, Keyboard, Autoplay, FreeMode, EffectCards]}
                    keyboard={{
                        enabled: true,
                    }}
                    autoplay={true}
                    effect={"cards"}
                    cardsEffect={{
                        rotate: true,
                        slideShadows: true,

                    }}
                    slidesPerView={3} // 显示数量
                    centeredSlides={true} // 幻灯片居中
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                >
                    {Array.from(Array(10).keys()).map((_item, i) => (
                        <SwiperSlide key={i} className={styles["swiperItem"]}>Slide {i}</SwiperSlide>
                    ))}

                </Swiper>
            </div>

        </div>
    );
};

export default SwiperDemo;
